<template>
  <div class="index">
    <index-nav></index-nav>
    <!-- 搜索框 开始-->
    <div class="search">
      <router-link to="/search">
        <input type="search" placeholder="大家都在搜 「游泳教练」" />
        <img src="../assets/magnifier.png" />
      </router-link>
    </div>
    <!-- 搜索框 结束-->
    <!-- 轮播图 开始 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :style="{ height: h }"
      :speed="200"
    >
      <van-swipe-item v-for="(item, i) in carousel" :key="i">
        <router-link to="/activity">
          <img :src="require(`../assets/lun/${item.src}`)" alt="" />
        </router-link>
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图 结束 -->
    <!-- 奥运特别板块 开始-->
      <div class="olympic">
        <div class="olympic2" v-for="(item,i) in medals" :key="i">
          <div class="gold">{{item.gold}}</div>
          <div class="silver">{{item.Silver}}</div>
          <div class="copper">{{item.copper}}</div>
        </div>
      </div>
    <!-- 主体内容 开始 -->
    <div class="main">
      <!-- 奥运特别板块 结束-->
      <!-- 培训课程 开始 -->
      <div class="title">
        <p>游泳培训</p>
      </div>
      <div class="course">
        <ul>
          <li v-for="(item, i) in train" :key="i">
            <img :src="require(`../assets/index/${item.src}`)" /><br />
            <router-link to="/circle">{{ item.title }}</router-link>
          </li>
        </ul>
      </div>
      <!-- 培训课程 结束 -->
      <!-- 预约 开始 -->
      <div class="title">
        <p>预约上课</p>
      </div>
      <div class="appointment">
        <div class="order">
          <img src="../assets/appointment.png" />
          <div class="order_item">
            <p>预约体验</p>
            <p>无需培训卡即可预约</p>
          </div>
          <router-link to="/circle">立即预约</router-link>
        </div>
      </div>
      <!-- 预约 结束 -->
      <!-- 泳票购买 开始 -->
      <div class="title">
        <p>泳票购买</p>
      </div>
      <div class="appointment">
        <div class="order">
          <img src="../assets/ticket.png" />
          <div class="order_item">
            <p>单次泳票购买</p>
            <p>
              <span>在</span><img src="../assets/logo.png" /><span>享优惠</span>
            </p>
          </div>
          <router-link to="/circle">立即购买</router-link>
        </div>
      </div>
      <!-- 泳票购买 结束 -->
      <!-- 泳具 开始 -->
      <div class="equip_title">
        <p>游泳装备推荐</p>
        <p><router-link to="/productdetails">查看更多</router-link></p>
      </div>
      <div class="banner">
        <router-link to="/productdetails" v-for="(item, i) in equip" :key="i">
          <img :src="require(`../assets/index/${item.src}`)" />
        </router-link>
      </div>
      <div class="equipment">
        <ul>
          <li v-for="(item, i) in zhuangbei" :key="i">
            <img :src="require(`../assets/index/${item.src}`)" />
            <p class="p_title">{{ item.title }}</p>
            <p class="price">
              <span>{{ item.exer }}</span>
              <s>{{ item.cost }}</s>
            </p>
          </li>
        </ul>
      </div>
      <!-- 泳具 结束 -->
      <!-- 教练 开始 -->
      <div class="equip_title">
        <p><router-link to="train">冠军教练</router-link></p>
        <p><router-link to="train">查看更多</router-link></p>
      </div>
      <div class="banner">
        <router-link to="train" v-for="(item, i) in drill" :key="i">
          <img :src="require(`../assets/index/${item.src}`)" />
        </router-link>
      </div>
      <div class="coach">
        <div v-for="(item, i) in coach" :key="i">
          <img :src="require(`../assets/index/${item.coach_pic}`)" />
          <div>
            <p>{{ item.cname }}</p>
            <p>{{ item.coach_details }}</p>
          </div>
          <router-link to="/coachdetails">去看看</router-link>
        </div>
      </div>
      <!-- 教练 结束 -->
      <!-- 会员活动 开始 -->
      <div class="title">
        <p>会员活动</p>
      </div>
      <div class="mix_banner">
        <router-link to="/opening" v-for="(item, i) in shaky" :key="i">
          <img :src="require(`../assets/index/${item.src}`)" />
        </router-link>
      </div>
      <div class="activity">
        <ul>
          <li v-for="(item, i) in ticket" :key="i">
            <router-link to="/eventdetails">
              <img :src="require(`../assets/index/${item.src}`)" />
              <p>{{ item.title }}</p>
              <p>{{ item.tic_datails }}</p>
              <p>{{ item.date }}</p>
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 会员活动 结束 -->
      <!-- 底线 -->
      <div class="bottom">······已经到底了······</div>
      <div class="beian">晋ICP备2021012877号-1</div>
    </div>
    <!-- 主体内容 结束 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      h: "300",
      carousel: [],
      train: [],
      img: "",
      eid: "1",
      equip: "",
      coach: [],
      ticket: [],
      zhuangbei: [],
      drill: "",
      shaky: "",
      medals:[],
    };
  },
  methods: {
    // 奥运奖牌
    medal(){
      this.axios.get("/olympic/").then(result=>{
        this.medals=result.data.data;
      })
    },
    // 轮播图
    loadcarousel() {
      this.axios.get(`/carousel`).then((result) => {
        this.carousel = result.data.data;
        // 一开始判断每一个商品的选中状态，是否选中全选按钮
      });
    },
    // 装备列表
    loaddrill() {
      this.axios.get("/drill/drill/" + this.lid).then((result) => {
        this.drill = result.data.data;
      });
    },
    // 项目列表
    loadTrain() {
      this.axios.get(`/train`).then((result) => {
        this.train = result.data.data;
      });
    },
    // 装备列表
    loadequip() {
      this.axios.get("/equip/equip/" + this.eid).then((result) => {
        this.equip = result.data.data;
      });
    },
    // 装备列表
    loadzhuangbei() {
      this.axios.get(`/zhuangbei`).then((result) => {
        this.zhuangbei = result.data.data;
      });
    },
    // 教练列表
    loadcoach() {
      this.axios.get(`/coach`).then((result) => {
        this.coach = result.data.data;
      });
    },
    // 装备列表
    loadshaky() {
      this.axios.get("/shaky/shaky/" + this.yid).then((result) => {
        this.shaky = result.data.data;
      });
    },
    // 优惠列表
    loadticket() {
      this.axios.get(`/ticket`).then((result) => {
        this.ticket = result.data.data;
      });
    },
    // 初始化轮播图
    initSwipe() {
      let picWidth = 600; // 图片宽
      let picHeight = 300; // 图片高
      let screenWidth = window.screen.width; // 屏幕宽
      let swipeHeight = Math.floor((picHeight * screenWidth) / picWidth) + "px";
      this.h = swipeHeight;
    },
  },
  watch: {},
  mounted() {
    // 初始化轮播图
    this.initSwipe();
    this.loadcarousel();
    this.loadTrain();
    this.loadequip();
    this.loadcoach();
    this.loadticket();
    this.loadzhuangbei();
    this.loaddrill();
    this.loadshaky();
    this.medal();
  },
};
</script>

<style>
.index {
  width: 100%;
  background-color: #fcfcfc;
  display: inline-block;
}
/* 奥运会 */
.index .olympic{
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  background: url(../assets/index/olympic.jpg) no-repeat;
  background-size: 100%;
  overflow: hidden;
  border-radius: 10px;
}
.index .olympic2{
  width: 90%;
  height: 100px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 10px;
  background:url(../assets/index/olympic2.jpg) no-repeat;
  background-size: 100%;
  position: relative;
}
.index .gold{
  width: 40px;
  text-align: center;
  color: #eb6a16;
  font-size: 16px;
  position: absolute;
  left: 19px;
  top:52px;
  font-weight: 600;
}
.index .silver{
  width: 40px;
  text-align: center;
  color: #8687bf;
  font-size: 16px;
  position: absolute;
  left: 80px;
  top: 52px;
  font-weight: 600;
}
.index .copper{
  width: 40px;
  text-align: center;
  color: #cd6123;
  font-size: 16px;
  position: absolute;
  left: 139px;
  top:52px;
  font-weight: 600;
}
/* 搜索 */
.index .search {
  width: 100%;
  margin: 0 auto;
  margin-top: 19%;
  height: 35px;
  position: relative;
}
.index .search > a > input {
  width: 8.5rem;
  height: 35px;
  border: 0;
  outline: none;
  border-radius: 35px;
  background-color: #efefef;
  padding: 0 10px 0 40px;
}
.index .search > a > img {
  width: 28px;
  position: absolute;
  top: 5px;
  left: 10%;
}
/* 主要内容 */
.index .main {
  width: 100%;
}
/* 轮播图 */
.index .my-swipe {
  margin-top: 10px;
}
.index .my-swipe img {
  width: 100%;
}

.index .title {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  margin-top: 10px;
  text-align: left;
}
.index .title > p {
  width: 90%;
  margin: 0 auto;
}
/* 中部导航 */
.index .course > ul {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  display: -webkit-box;
  white-space: nowrap;
}
.index .course > ul::-webkit-scrollbar {
  width: 0;
}
.index .course > ul > li {
  width: 120px;
  height: 130px;
  font-size: 14px;
  margin: 10px 10px 0 10px;
  display: inline-block;
  position: relative;
}
.index .course > ul > li > img {
  display: inline-block;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.4);
}
.index .course > ul > li > a {
  display: block;
  width: 120px;
  height: 80px;
  position: absolute;
  bottom: 10px;
  left: 0;
  line-height: 120px;
  color: #fff;
  border-radius: 0 0 20px 20px;
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.1),
    rgba(0, 0, 0, 0.8)
  );
}
/* 预约 */
.index .appointment {
  width: 100%;
  height: 100px;
}
.index .order {
  width: 80%;
  height: 100px;
  margin: 10px auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  border: 1px solid #333;
  padding: 0 10px;
}
.index .order > img {
  display: inline-block;
  width: 50px;
}

.index .order > :last-child {
  padding: 10px;
  width: 100px;
  border-radius: 2px;
  background-color: #007bff;
  color: #fff;
}
.index .order_item {
  width: 200px;
  padding: 0 0.3rem;
}
.index .order_item > :first-child {
  font-size: 0.5rem;
  font-weight: 600;
  text-align: left;
}
.index .order_item > :last-child {
  font-size: 0.3rem;
  margin-top: 10px;
  text-align: left;
  display: flex;
  align-items: center;
}
.index .order_item > p > img {
  width: 1.5rem;
  display: block;
}
/* 泳具推荐 */
.index .equip_title {
  width: 90%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
  margin-top: 20px;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
.index .equip_title > p > a {
  color: #333;
}
.index .equip_title > :last-child {
  width: 72px;
  height: 22px;
  line-height: 23px;
  border: 1px solid #333;
  border-radius: 30px;
  text-align: center;
  font-size: 12px;
}
.index .equip_title > :last-child > a {
  color: #333;
}
.index .banner {
  width: 90%;
  height: 160px;
  margin: 10px auto;
}
.index .banner > a > img {
  width: 100%;
  border-radius: 10px;
}
.index .equipment {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.index .equipment > ul {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  display: -webkit-box;
  white-space: nowrap;
}
.index .equipment > ul::-webkit-scrollbar {
  width: 0;
}
.index .equipment > ul > li {
  width: 120px;
  height: 180px;
  font-size: 14px;
  margin: 10px 10px 0 10px;
  display: inline-block;
  position: relative;
  border-radius: 10px;
  border: 1px solid #ddd;
}
.index .equipment > ul > li > img {
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.index .equipment > ul > li > p {
  padding: 0 10px;
  text-align: left;
  margin-top: 7px;
}
.index .p_title {
  font-size: 14px;
}
.index .price > :first-child {
  font-size: 16px;
  color: #dc3545;
  margin-right: 5px;
}
.index .price > :first-child::before {
  content: "￥";
  font-size: 12px;
}
.index .price > :last-child {
  font-size: 12px;
  color: #555;
}
.index .price > :last-child::before {
  content: "￥";
  font-size: 12px;
}
/* 教练 */
.index .coach {
  width: 90%;
  margin: 5px auto;
  border-top: 10px solid #dc3545;
  border-bottom: 10px solid #dc3545;
  border-radius: 5px;
}
.index .coach > div {
  width: 100%;
  height: 120px;
  box-sizing: border-box;
  border: 1px solid #dc3545;
  display: flex;
  align-items: center;
  border-top: 0;
}
.index .coach > div > img {
  width: 118px;
  display: inline-block;
  overflow: hidden;
}
.index .coach > div > div {
  width: 140px;
  padding: 10px;
}
.index .coach > div > div > p {
  text-align: left;
}
.index .coach > div > div > :first-child {
  font-size: 0.5rem;
}
.index .coach > div > div > :last-child {
  font-size: 0.3rem;
  line-height: 0.5rem;
  margin-top: 10px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  height: 2rem;
}
.index .coach > div > a {
  display: block;
  width: 50px;
  height: 30px;
  background-color: #dc3545;
  color: #fff;
  border-radius: 30px;
  line-height: 30px;
}
/* 会员 */
.index .mix_banner {
  width: 90%;
  margin: 10px auto;
}
.index .mix_banner img {
  width: 100%;
  border-radius: 10px;
}
/* 活动 */
.index .activity {
  width: 90%;
  margin: 0 auto;
}
.index .activity > ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
}
.index .activity > ul > li {
  width: 48%;
  height: 48%;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-top: 10px;
}
.index .activity > ul > li > a {
  color: #333;
  display: block;
}
.index .activity > ul > li > a > img {
  display: block;
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.index .activity > ul > li > a > p {
  text-align: left;
  padding: 0 10px;
  line-height: 24px;
}
.index .activity > ul > li > a > :nth-child(2) {
  font-size: 16px;
  line-height: 30px;
}
.index .activity > ul > li > a > :nth-child(4) {
  color: #aaa;
}
.index .bottom {
  color: #aaa;
  margin-top: 20px;
}
.index .beian {
  color: #555;
  margin-top: 10px;
  padding-bottom: 100px;
}
</style>
